<template>
    <div class="jianzhan-content">
        <Crumb :name="$t('con.consignment')"> </Crumb>
        <div class="content">
            <el-button type="primary" size="small"
                       class="input" icon="el-icon-plus"
                       @click="openAdd"
                       v-if="urlAvailible('jianzhan-contract-operate')">{{$t('con.add')}}</el-button>
            <!--<el-input v-model="key"-->
                      <!--:placeholder="$t('pApply.purchaseNumber')"-->
                      <!--prefix-icon="el-icon-search"-->
                      <!--size="small"-->
                      <!--style="width: 200px;margin-left: 10px;">-->
            <!--</el-input>-->
            <div class="table-wrapper">
                <el-table
                        :data="consignmentList.filter(item=>item.purchaseContractNumber.includes(key))"
                        border
                        stripe
                        max-height="600"
                        empty-text="No Data"
                        style="width: 100%">
                    <el-table-column type="expand">
                        <template slot-scope="scope">
                            <h3>{{$t('con.consignment')}}</h3>
                            <div v-for="(item,idx) in (scope.row.uploadFileUrl ? scope.row.uploadFileUrl.split(',') : [])" :key="idx" >
                                <a class="link" :href="item">{{item}}</a>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="purchaseContractNumber"
                            :label="$t('con.purchaseContractNumber')"
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="supplierName"
                            :label="$t('con.supplierName')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="supplierContractNumber"
                            :label="$t('con.supplierContractNumber')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="purchaseCompany"
                            :label="$t('con.purchaseCompany')"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="contractDateStr"
                            :label="$t('con.contractDateStr')"
                           >
                    </el-table-column>
                    <el-table-column
                            prop="sumPrice"
                            :label="$t('con.sumPrice')">
                    </el-table-column>
                    <el-table-column
                            prop="transportPrice"
                            :label="$t('con.transportPrice')">
                    </el-table-column>
                    <el-table-column
                            prop="packagePrice"
                            :label="$t('con.packagePrice')">
                    </el-table-column>
                    <el-table-column
                            prop="otherPrice"
                            :label="$t('con.otherPrice')">
                    </el-table-column>
                    <el-table-column width="350px">
                        <!-- eslint-disable-next-line-->
                        <template slot="header" slot-scope="scope">
                            <el-input v-model="key"
                                      class="my-input"
                                      :placeholder="$t('con.search')"
                                      size="small"
                                      prefix-icon="el-icon-search"></el-input>
                        </template>
                        <template slot-scope="scope">
                            <el-button type="primary"
                                       size="small"
                                       @click="openEdit(scope.row)">{{$t('edit')}}</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
        <el-dialog
                :title="$t('con.consignment')"
                :visible.sync="dialogVisible"
                width="80%"
        >
            <el-form ref="form" :model="consignment" :rules="rule" label-width="150px" inline style="text-align: left">
                <el-form-item :label="$t('con.purchaseContractNumber')" prop="purchaseContractNumber">
                    <el-select v-model="consignment.purchaseContractNumber"
                               @change="contractChange"
                               :placeholder="$t('con.purchaseContractNumber')" size="small">
                        <el-option v-for="item in purchaseList" :key="item.id" :label="item.purchaseNumber"
                                   :value="item.purchaseNumber"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('con.salesOrder')">
                    <el-input v-model="consignment.salesOrder" :placeholder="$t('con.salesOrder')" disabled size="small"></el-input>
                </el-form-item>
                <el-form-item :label="$t('con.contractDateStr')" prop="contractDateStr" size="small">
                    <el-date-picker value-format="yyyy-MM-dd" size="small" v-model="consignment.contractDateStr"
                                    placeholder="Select Date"></el-date-picker>
                </el-form-item>
                <!--<el-form-item label="客户">-->
                    <!--<el-select v-model="consignment.customer" placeholder="客户" size="small">-->
                        <!--<el-option v-for="item in ['IEL-ITSS','IEL-TID','IEL-IEC']" :key="item" :value="item"-->
                                   <!--:label="item"></el-option>-->
                    <!--</el-select>-->
                <!--</el-form-item>-->
                <el-form-item :label="$t('con.purchaseCompany')">
                    <el-select v-model="consignment.purchaseCompany" placeholder="采购方" size="small">
                        <el-option value="上海剑展" label="上海剑展"></el-option>
                        <el-option value="西安剑展" label="西安剑展"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('con.supplierName')">
                    <el-select v-model="consignment.supplier" placeholder="供应商" size="small">
                        <el-option
                                v-for="item in vendorList"
                                :key="item.id"
                                :label="item.chineseName"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item :label="$t('con.supplierContractNumber')">
                    <el-input v-model="consignment.supplierContractNumber" placeholder="supplier Contract Number" size="small"></el-input>
                </el-form-item>
                <el-form-item :label="$t('con.sumPrice')">
                    <el-currency-input v-model="consignment.sumPrice" placeholder="Total Price" size="small"></el-currency-input>
                </el-form-item>
                <el-form-item :label="$t('con.transportPrice')">
                    <el-currency-input v-model="consignment.transportPrice" placeholder="Transport Price"
                              size="small"></el-currency-input>
                </el-form-item>
                <el-form-item :label="$t('con.packagePrice')">
                    <el-currency-input v-model="consignment.packagePrice" placeholder="Package Price" size="small"></el-currency-input>
                </el-form-item>
                <el-form-item :label="$t('con.otherPrice')">
                    <el-currency-input v-model="consignment.otherPrice" placeholder="Other" size="small"></el-currency-input>
                </el-form-item>

                <div style="margin-bottom: 20px" v-if="urlAvailible('jianzhan-contract-operate')">
                    <label for="file" class="label-btn">{{$t('upload')}}</label>
                    <div v-for="item in consignment.uploadFileUrl" :key="item">{{item | getFileName}}</div>
                    <input type="file" @change="fileChange" multiple id="file" v-show="false" ref="file">
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="submitForm" v-if="urlAvailible('jianzhan-contract-operate')">{{$t('confirm')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import Crumb from '../../components/common/crumb'
    import {ERROR_OK} from "../../util/config";
    import {
        purchaseContact,
        addPurchaseContract,
        modPurchaseContract,
        getVendorList,
        getPurchaseList
    } from "../../api/jianzhan";
    import {upLoadFiles} from "../../api";
    import {getFileName} from "../../util";
    import authMixins from '../../util/authMixins'

    export default {
        name: "consignment",
        mixins:[authMixins],
        data() {
            return {
                purchaseList: [],
                consignmentList: [],
                dialogVisible: false,
                vendorList: [],
                consignment: {
                    purchaseApplicationId:'',
                    supplierContractNumber:'',
                    purchaseContractNumber: '',
                    purchaseCompany: '',
                    supplier: '',
                    contractDateStr: '',
                    sumPrice: 0,
                    customer: '',
                    uploadFileUrl: [],
                    transportPrice: 0,
                    packagePrice: 0,
                    otherPrice: 0
                },
                key: '',
                rule: {
                    purchaseContractNumber: [{required: true, message: '合同号必需填写'}],
                    contractDateStr: [{required: true, message: '日期必须选择'}]
                }
            }
        },
        filters: {
            getFileName(name) {
                return getFileName(name)
            }
        },
        created() {
            this.getPurchaseList();
            this.getConsignmentList();
            this.getVendorList()
        },
        methods: {
            async getPurchaseList() {
                const {status, data} = await getPurchaseList();
                if (status === ERROR_OK) {
                    this.purchaseList = data
                }
            },
            async getVendorList() {
                const {status, data} = await getVendorList();
                if (status === ERROR_OK) {
                    this.vendorList = data
                }
            },
            async fileChange(e) {
                const formData = new FormData();
                Array.prototype.forEach.call(e.target.files, item => {
                    formData.append('upload_file', item)
                });
                const {success, file_path} = await upLoadFiles(formData);
                if (success) {
                    this.$set(this.consignment, 'uploadFileUrl', file_path)
                }
                this.$nextTick(() => {
                    this.$refs.file.value = '';
                })
            },
            openAdd() {
                this.dialogVisible = true;
                this.clear()
            },
            clear() {
                this.consignment = {
                    salesOrder:'',
                    purchaseApplicationId:'',
                    purchaseContractNumber: '',
                    purchaseCompany: '',
                    supplier: '',
                    contractDateStr: '',
                    sumPrice: 0,
                    customer: '',
                    uploadFileUrl: [],
                    id: '',
                    transportPrice: 0,
                    packagePrice: 0,
                    otherPrice: 0
                };
                this.partList = [];
            },
            async openEdit(row) {
                this.consignment = row;
                if (Array.isArray(row.uploadFileUrl)) {
                    this.dialogVisible = true;
                    return
                }
                this.$set(this.consignment,'uploadFileUrl',row.uploadFileUrl ? row.uploadFileUrl.split(','):[]);
                this.dialogVisible = true
            },
            submitForm() {
                this.$refs.form.validate(async valid => {
                    if (valid) {
                        let {
                            id,
                            salesOrder,
                            purchaseApplicationId,
                            purchaseContractNumber,
                            supplierContractNumber,
                            purchaseCompany,
                            supplier,
                            contractDateStr,
                            transportPrice,
                            packagePrice,
                            otherPrice,
                            sumPrice,
                            customer,
                            uploadFileUrl
                        } = this.consignment;
                        uploadFileUrl = uploadFileUrl ? uploadFileUrl.join(',') : ''

                        if (id) {
                            const {status, msg} = await modPurchaseContract({
                                salesOrder,
                                purchaseContractNumber,
                                supplierContractNumber,
                                purchaseApplicationId,
                                contractDateStr,
                                customer,
                                purchaseCompany,
                                id,
                                supplier,
                                sumPrice,
                                uploadFileUrl,
                                transportPrice,
                                packagePrice,
                                otherPrice
                            });
                            if (status === 0) {
                                this.$notify.success('修改采购合同成功');
                                this.clear();
                                this.getConsignmentList()
                                this.dialogVisible = false
                            } else {
                                this.$notify.error(msg)
                            }
                        } else {
                            const {status, msg} = await addPurchaseContract({
                                salesOrder,
                                purchaseContractNumber,
                                supplierContractNumber,
                                purchaseApplicationId,
                                contractDateStr,
                                customer,
                                purchaseCompany,
                                supplier,
                                sumPrice,
                                transportPrice,
                                packagePrice,
                                otherPrice,
                                uploadFileUrl
                            });
                            if (status === ERROR_OK) {
                                this.$notify.success('增加采购合同成功');
                                this.clear();
                                this.dialogVisible = false;
                                this.getConsignmentList()
                            } else {
                                this.$notify.error(msg)
                            }
                        }

                    }
                })
            },
            contractChange(contractNo) {
                const target = this.purchaseList.find(item => {
                    return item.purchaseNumber === contractNo
                });
                if (target) {
                    this.$set(this.consignment,'purchaseApplicationId',target.id)
                    this.$set(this.consignment,'salesOrder',target.salesOrder)
                }
            },
            async getConsignmentList() {
                const {status, data} = await purchaseContact();
                if (status === ERROR_OK) {
                    this.consignmentList = data ? data : [];
                } else {
                    this.consignmentList = [];
                    this.$notify.warning('没有合同数据')
                }
            }
        },
        components: {
            Crumb
        }
    }
</script>

<style scoped lang="scss">
    @import "../../css/mixins";

    .content {
        @include content
    }
    .link{
        color: $bg-theme;
        text-decoration: underline;
    }
    .label-btn {
        cursor: pointer;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: white;
        background-color: #409eff;
        border-radius: 3px;
        padding: 5px 15px;
        display: block;
        width: 120px;
    }

    .warning {
        color: #fff;
        font-weight: bold;
        background-color: #c60023;
    }
</style>